<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>枫叶Music云系统</title>
		<meta name="keywords" content="枫叶,音乐,云系统">
		<meta name="description" content="枫叶Music云系统">
		<style>
			*{margin:0px;padding:0px;}
			body{background:url("img/bg.jpg") no-repeat;background-size:cover;font:14px/1.5 "微软雅黑";color:#666;}
			#Music{width:960px;height:250px;background:url("img/banner_bg.jpg");margin:50px auto;position:relative;}
			#Music ul li{list-style-type:none;}
			#Music ul li.m5{position:absolute;top:160px;left:585px;}
			#Music ul li.m4{position:absolute;top:20px;left:474px;}
			#Music ul li.m3{position:absolute;top:65px;left:308px;}
			#Music ul li.m2{position:absolute;top:90px;left:150px;}
			#Music ul li.m1{position:absolute;top:50px;left:10px;}
			#Music ul li img{border-radius:120px;}
			.xz{animation:rotate 2s infinite linear;}
			@-webkit-keyframes rotate{
				from{transform:rotate(0deg);-webkit-transform:rotate(0deg)}
				to{transform:rotate(360deg);-webkit-transform:rotate(360deg);}
			}
			/*播放按扭样式*/
			#MusicBut{width:560px;height:116px;background:#000;border-radius:0px 5px 5px 0px;position:fixed;left:0px;bottom:100px;}
			#MusicBut .pic{width:90px;height:90px;float:left;margin-top:15px;}
			#MusicBut .txt{width:220px; height:90px;float:left;margin-top:15px;font-size:20px;color:#fff; ine-height:90px;}
			#MusicBut .but{width:150px;height:35px; float:left;margin-top:40px;}
			#MusicBut .close{width:23px;height:116px; float:right; background:url("img/player_bg.png");}
			#MusicBut .but a{margin:0px 10px;display:block;float:left;}
			#MusicBut .but a.prev{width:20px;height:35px;background:url("img/player_bg.png") -77px 0px; }
			#MusicBut .but a.play{width:30px;height:35px; background:url("img/player_bg.png") -113px -3px;}
			#MusicBut .but a.next{width:20px;height:35px; background:url("img/player_bg.png") -155px 0px;}
			#MusicBut .but a.pause{width:30px;height:35px; background:url("img/player_bg.png") -300px -93px;}
			#MusicBut .but a.prev:hover{background:url("img/player_bg.png") -77px -32px; }
			#MusicBut .but a.play:hover{ background:url("img/player_bg.png") -113px -45px;}
			#MusicBut .but a.next:hover {background:url("img/player_bg.png") -155px -32px;}
			#MusicBut .but a.pause:hover{width:30px;height:35px; background:url("img/player_bg.png") -342px -93px;}
		</style>
	</head>
	<body>
		<!--音乐播入列表开始-->
		<div id="Music">
		<ul>
			<li class="m1" value="music2/1.mp3"><img src="img/1.jpg" title="烛光里的妈妈" width="65" /></li>
			<li class="m2" value="music2/2.mp3"><img src="img/2.jpg" title="当你老了" width="100"/></li>
			<li class="m3" value="music2/3.mp3"><img src="img/3.jpg" title="母亲" width="120"></li>
			<li class="m4" value="music2/4.mp3"><img src="img/4.jpg" title="相亲相爱一家人" width='90'/></li>
			<li class="m5" value="music2/5.mp3"><img src="img/5.jpg" title="胸心壮志" width="65"/></li>
		</ul>
	 	</div> 
		<!--音乐播入列表结束-->
		<!--音乐播放按扭开始-->
		<div id="MusicBut">
			<div class="pic"><img src="img/1.jpg" width="90"/></div>
			<div class="txt">烛光里的妈妈</div>
			<div class="but">
				<a  href="javascript:void(0)" class="prev"></a>
				<a  href="javascript:void(0)" class="play"></a>
				<a  href="javascript:void(0)" class="next"></a>
			</div>
			<div class="close"></div>
		</div>
		<!--音乐播放按扭结束-->
		<audio src="music2/1.mp3" id="myMusic"></audio>
		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
		<script>
			var Mp3Src="";
			var ImgSrc="";
			var Mp3Title="";
			var mark=0;  //当前是暂停
			var _index=0;
			var audio=$("#myMusic").get(0);
			var pk=0;
			audio.autoplay = "autoplay";
			$("#Music ul li").click(function(){
				_index=$(this).index();//序列号
				$(this).addClass("xz").siblings().removeClass("xz"); //图片转圏圈
				Mp3Src=$(this).attr("value"); //获取音乐地址
				ImgSrc=$(this).find("img").attr("src"); //获取图片地址
				$("#MusicBut .pic img").attr("src",ImgSrc);
				Mp3Title=$(this).find("img").attr("title"); //获取标题
				$("#MusicBut .txt").text(Mp3Title);
				$("#MusicBut .but a.play").addClass("pause"); //改变播放按扭
				mark=1; //当前是播放
				audio.src=Mp3Src;
				audio.play();
			});
			//播放按扭
			$("#MusicBut .but a.play").click(function(){
				if(mark==0){
					audio.play();
					$("#MusicBut .but a.play").addClass("pause"); //改变播放按扭
					mark=1;
				}else{
					audio.pause();
					$("#MusicBut .but a.play").removeClass("pause"); //改变播放按扭
					$("#Music ul li").removeClass("xz");
					mark=0;
				}
			});
			//下一个按扭
			$("#MusicBut .but a.next").click(function(){
				_index++;
				if(_index>4){_index=0;}
				$("#MusicBut .but a.play").addClass("pause"); //改变播放按扭
				mark=1;
				$("#Music ul li").eq(_index).addClass("xz").siblings().removeClass("xz");
				Mp3Src=$("#Music ul li").eq(_index).attr("value");
				Mp3Title=$("#Music ul li").eq(_index).find("img").attr("title");
				ImgSrc=$("#Music ul li").eq(_index).find("img").attr("src");
				$("#MusicBut .pic img").attr("src",ImgSrc);
				$("#MusicBut .txt").text(Mp3Title);
				audio.src=Mp3Src;
				audio.play();
			});
			//下一个按扭
			$("#MusicBut .but a.prev").click(function(){
				_index--;
				if(_index<0){ _index=4; }
				$("#MusicBut .but a.play").addClass("pause"); //改变播放按扭
				mark=1;
				$("#Music ul li").eq(_index).addClass("xz").siblings().removeClass("xz");
				Mp3Src=$("#Music ul li").eq(_index).attr("value");
				Mp3Title=$("#Music ul li").eq(_index).find("img").attr("title");
				ImgSrc=$("#Music ul li").eq(_index).find("img").attr("src");
				$("#MusicBut .pic img").attr("src",ImgSrc);
				$("#MusicBut .txt").text(Mp3Title);
				audio.src=Mp3Src;
				audio.play();
			});
			$(".close").click(function(){
				if(pk==0){
					$("#MusicBut").animate({"left":"-537px"},500);
					pk=1;
				}else{
					$("#MusicBut").animate({"left":"0px"},500);
					pk=0;
				}
			});
		</script>
	</body>
</html>